import React, { Component } from 'react'
import { Form, Icon, Input, Button, Row, Col, message } from 'antd'
import { Link } from 'react-router-dom'
import './forget.less'
import LoginHeader from '../components/LoginHeader/LoginHeder'
import { reqGetCodeByUsername, reqForget } from '../../../api'

class Forget extends Component {
    state = {
        codeBtnContent: '获取验证码',
        codeBtnDisable: false
    }

    checkPassword = (rules, value, callback) => {
        let password = this.props.form.getFieldValue('password')
        if (value !== password) {
            callback('两次密码不一致')
        }
        callback();
    }

    getCode = () => {
        let username = this.props.form.getFieldValue('username')
        
        reqGetCodeByUsername(username).then(res => {
            if (res.code === 0) {
                this.setState({
                    codeBtnDisable: true,
                    codeBtnContent: '60 S'
                })
                this.codeTimer(this.state.codeBtnContent)
                message.success(res.msg)
            } else {
                message.error(res.msg)
            }
        })
    }

    codeTimer = (codeBtnContent) => {
        let s = codeBtnContent.split(' ')[0] * 1
        s = s - 1
        setTimeout(() => {
            
            if(s < 0){
                this.setState({
                    codeBtnDisable: false,
                    codeBtnContent: '重新获取'
                })
            }else{
                this.setState({
                    codeBtnContent: s + ' S'
                })
                this.codeTimer(this.state.codeBtnContent)
            }
        }, 1000)
    }

    handleSubmit = (event) => {
        event.preventDefault()
        this.props.form.validateFields((err, values) => {
            if(!err){
                reqForget(values).then(res => {
                    if(res.code === 0){
                        message.success(res.msg)
                        setTimeout(() => {
                            this.props.history.replace('/login')
                        }, 2000)
                    }else{
                        message.error(res.msg)
                    }
                }).catch(error => {

                })
            }
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const {codeBtnDisable, codeBtnContent} = this.state
        return (
            <div className="forget">
                <LoginHeader />
                <div className="forget-box">
                    <h3>忘记密码</h3>
                    <Form onSubmit={this.handleSubmit} className="forget-form">
                        <Form.Item>
                            {getFieldDecorator('username', {
                                rules: [
                                    { required: true, message: '请输入用户名或手机号' },
                                    { min: 4, message: '用户名必须大于等于4位' },
                                    { max: 12, message: '用户名必须小于等于12位' },
                                    { pattern: /^[A-Za-z0-9_]+$/, message: '用户名必须由英文字母、数字、下划线组成' },
                                ],
                            })(
                                <Input
                                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder="请输入用户名或手机号"
                                />
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('password', {
                                rules: [
                                    { required: true, message: '请输入新密码' },
                                    { min: 4, message: '密码必须大于等于4位' },
                                    { max: 12, message: '密码必须小于等于12位' },
                                    { pattern: /^[A-Za-z0-9_]+$/, message: '密码必须由英文字母、数字、下划线组成' },
                                ],
                            })(
                                <Input
                                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type="password"
                                    placeholder="请输入新密码"
                                />
                            )}

                        </Form.Item>

                        <Form.Item>
                            {getFieldDecorator('password2', {
                                rules: [
                                    { required: true, message: '请再次输入密码' },
                                    { min: 4, message: '密码必须大于等于4位' },
                                    { max: 12, message: '密码必须小于等于12位' },
                                    { pattern: /^[A-Za-z0-9_]+$/, message: '密码必须由英文字母、数字、下划线组成' },
                                    { validator: this.checkPassword },
                                ],
                            })(
                                <Input
                                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type="password"
                                    placeholder="请再次输入新密码"
                                />
                            )}

                        </Form.Item>

                        <Form.Item>
                            <Row gutter={20}>
                                <Col span={16}>
                                    {getFieldDecorator('code', {
                                        rules: [
                                            { required: true, message: '请输入验证码' },
                                        ],
                                    })(
                                        <Input
                                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            placeholder="请输入验证码"
                                        />
                                    )}
                                </Col>
                                <Col span={8}>
                                    <Button block onClick={this.getCode} disabled={codeBtnDisable}>{codeBtnContent}</Button>
                                </Col>
                            </Row>

                        </Form.Item>

                        <Form.Item>

                            <Button type="primary" htmlType="submit" block>立即注册</Button>
                            <div className="forget-form-link">
                                <Link to="/login">已有账号</Link>
                                <Link to="/register">注册</Link>
                            </div>

                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}

const WrappedForget = Form.create()(Forget);

export default WrappedForget
